<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <title>Ajax hook Demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no"/>
    <meta name="keywords" content="Ajax hook Demo">
    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="../dist/ajaxhook.core.min.js"></script>

</head>
<style>
    html {
        font-size: 20px;
        -webkit-user-select: none;
    }
</style>
<body>
<div style="background: #000; font-size: 38px; color: #ffef68; text-shadow: 2px 2px 10px #ffef68; width: 400px; height: 400px; text-align: center">
    <div style="padding-top: 100px"> Ajax Hook !</div>
</div>
open console panel to view log.
<script>
    ah.hook({
        onreadystatechange: function (xhr) {
            console.log("onreadystatechange called: %O", xhr)
        },
        onload: function (xhr) {
            console.log("onload called: %O", xhr)
            // xhr.getProxy().responseText='xhr.responseText'
            this.responseText = "hookAjax" + xhr.responseText;
        },
        open: function (arg, xhr) {
            console.log("open called: method:%s,url:%s,async:%s", arg[0], arg[1], arg[2], xhr)
            //add tag
            arg[1] += "?hook_tag=1";

        },
        send: function (arg, xhr) {
            console.log("send called: %O", arg[0])
            xhr.setRequestHeader("_custom_header_", "ajaxhook")
        },
        setRequestHeader: function (args, xhr) {
            console.log("setRequestHeader called!", args)
        }
    })


    $.get().done(function (d) {
        console.log(d.substr(0, 30) + "...")
        //use original XMLHttpRequest
        console.log("unhook")
        ah.unHook()
        $.get().done(function (d) {
            console.log(d.substr(0, 10))
        })

    })

</script>
</body>
</html>
